<template>
  <div class="modal fade" ref="modalNode">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5">{{ title }}</h1>
        </div>
        <div class="modal-body p-4">
          <slot></slot>
        </div>
        <div class="modal-footer">
          <bs-button type="primary" icon="floppy-disk" @click="$emit('confirm')">确定</bs-button>
          <bs-button type="secondary" icon="ban" @click="$emit('cancel')">取消</bs-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

import * as bootstrap from 'bootstrap';
import { onMounted, watch, ref, defineProps, defineEmits } from "vue";


//  props: ["title", "visible"],
const props = defineProps(["title", "visible"]);//宏（函数）
// emits: ["confirm", "cancel"],
defineEmits(["confirm", "cancel"]);

const modalNode = ref(null);
// 显示对话框
let myModal = null;
onMounted(() => {
  myModal = new bootstrap.Modal(modalNode.value, {
    backdrop: "static",
    keyboard: false,
  });
  // 可见
  if (props.visible) myModal.show();
  else myModal.hide();
});
watch(
  () => props.visible,
  () => {
    if (props.visible) myModal.show();
    else myModal.hide();
  },
  {
    flush: "post",
  }
);
</script>

<script>
/* 
import { onMounted, watch, ref } from "vue";

import * as bootstrap from 'bootstrap';
export default {
  props: ["title", "visible"],
  emits: ["confirm", "cancel"],
  setup(props) {
    const modalNode = ref(null);
    // 显示对话框
    let myModal = null;
    onMounted(() => {
      myModal = new bootstrap.Modal(modalNode.value, {
        backdrop: "static",
        keyboard: false,
      });
      // 可见
      if (props.visible) myModal.show();
      else myModal.hide();
    });
    watch(
      () => props.visible,
      () => {
        if (props.visible) myModal.show();
        else myModal.hide();
      },
      {
        flush: "post",
      }
    );
    return {
      modalNode,
    };
  },
}; */
</script>